import React, { useState } from 'react'
import { Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import TabBar from './TabBar' // 处理拖拽排序的 TabBar 组件


type Tab = {
  id: string
  title: string
  content: string
}

const TabManager: React.FC = () => {
  const [tabs, setTabs] = useState<Tab[]>([{ id: '1', title: 'Tab 1', content: 'Content 1' }])
  const [activeTab, setActiveTab] = useState<string>('1')

  // 添加标签
  const addTab = () => {
    const newTab: Tab = {
      id: Date.now().toString(),
      title: `Tab ${tabs.length + 1}`,
      content: `Content ${tabs.length + 1}`
    }
    setTabs([...tabs, newTab])
    setActiveTab(newTab.id)
  }

  // 删除标签
  const removeTab = (targetId: string) => {
    const newTabs = tabs.filter((tab) => tab.id !== targetId)
    setTabs(newTabs)
    if (activeTab === targetId && newTabs.length > 0) {
      setActiveTab(newTabs[newTabs.length - 1].id)
    }
  }

  return (
    <div>
      <TabBar
        tabs={tabs}
        setTabs={setTabs}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        removeTab={removeTab}
      />
      <Button icon={<PlusOutlined />} onClick={addTab}>
        New Tab
      </Button>
    </div>
  )
}

export default TabManager
